<template>
  <div class="searchPage">
    <div class="homeHeader">
      <div>
        <img :src="icon.mapMarker" alt="">
        <van-dropdown-menu active-color="#000000">
          <van-dropdown-item
            @change="handleChangeCity"
            v-model="currentCity"
            :options="cityOption"
          />
        </van-dropdown-menu>
      </div>
      <van-search
        ref="searchRef"
        class="searchBar"
        v-model="searchTxt"
        @search="onSearch"
        shape="round"
        clearable
        background="#ffc600"
        placeholder="搜索一切你想搜索的内容"
      />
    </div>
    <div class="searchContent container">
      <div v-if="merchantCount" style="display: flex; justify-content: end;">
        <span>共检索出 {{ merchantCount }}条数据</span>
      </div>
      <van-pull-refresh
        loading-text="刷新中"
        success-text="刷新成功"
        v-model="refreshing"
        @refresh="onRefresh">
        <template v-if="merchantList.length">
          <van-list
            :loading="loading"
            :finished="finished"
            finished-text="我是有底线的"
            @load="onLoad"
            :immediate-check="false"
          >
            <MerchantCard
              class="merchantItem"
              v-for="item in merchantList"
              :merchantData="item"
              :key="item.id"
            />
          </van-list>
        </template>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
      <van-back-top  target=".container"/>
    </div>
  </div>
</template>
<script setup>
import { categoryListMethod, merchantListMethod } from "@/api/homePage.js";
import MerchantCard from '../homePage/merchantCard.vue'
import cityCoordinates from '@/utils/cityCoordinates'
import foodActive from '@/assets/image/icon-food-active.png';
import food from '@/assets/image/icon-food.png';
import shopActive from '@/assets/image/icon-shop-active.png';
import shop from '@/assets/image/icon-shop.png';
import mapMarker from '@/assets/image/map_marker.png';
const icon = reactive({ foodActive, food, shopActive, shop, mapMarker })

//城市选择下拉控件
const currentCity = ref(cityCoordinates[0].cityName);
const cityOption = cityCoordinates.map(item => {
  const { cityName, lon, lat } = item;
  return { text: cityName, value: cityName, lon, lat }
});
const handleChangeCity = () => {
  refreshing.value = true;
  onRefresh();
}

//检索功能
onMounted(() => { onSearch() })
const route = useRoute();
const { searchContent } = route.query;
const searchTxt = ref(searchContent);
const searchRef = ref(null);
const onSearch = async () => {
  searchRef.value.blur()
  searchParams.name = searchTxt.value;
  refreshing.value = true;
  onRefresh();
}

//商家列表参数
const searchParams = reactive({
  name: "",
  firstLevel: '',
  secondLevel: '',
  lon: '',
  lat: '',
  pageNum: 1,
  pageSize: 10,
});

//下拉刷新
const refreshing = ref(false);  //是否处于下拉刷新中
const onRefresh = () => {
  finished.value = false;
  onLoad();
};

//商家列表
const merchantCount = ref(0)
const merchantList = ref([]);
const loading = ref(false);  //是否列表加载中
const finished = ref(false); //是否列表全部加载完成
const onLoad = async () => {
  loading.value = true;
  if (refreshing.value) {
    searchParams.pageNum = 1;
  }
  //参数组合
  const cityData = cityOption.find(item => item.value === currentCity.value);
  const { lon, lat } = cityData;
  const params = { ...searchParams, lon, lat };
  //数据请求开始
  const res = await merchantListMethod(params);
  const { rows, total, code } = res;
  merchantCount.value = total;
  //刷新后的数据处理
  if (refreshing.value) {
    merchantList.value = rows;
  }else {
    merchantList.value.push(...rows);
  }
  refreshing.value = false;
  //数据请求结束
  loading.value = false;
  searchParams.pageNum++;
  if(merchantList.value.length >= total) {
    finished.value = true;
  }
}

</script>
<style lang="less" scoped>
div.searchPage {
  width: 100%;
  height: 100%;
  position: relative;
  >.homeHeader {
    height: 120px;
    background: #ffc600;
    padding: 12px;
    box-sizing: border-box;
    >div:first-child {
      display: flex;
      align-items: center;
      justify-content: start;
      margin-bottom: 4px;
      img {
        width: 18px;
        height: 18px;
      }
      ::v-deep .van-dropdown-menu__bar {
        height: 25px;
        background: #ffc600 !important;
        box-shadow: unset !important;
        .van-dropdown-menu__title {
          padding-left: 4px;
          .van-ellipsis {
            font-size: 16px;
            font-weight: bold;
          }
          &::after {
            border-color: transparent transparent #000000 #000000;
          }
        }
      }
    }
    >.searchBar {
      --van-search-padding: 0;
      --van-search-input-height: 48px;
      ::v-deep .van-icon {
        font-size: 18px;
      }
      ::v-deep .van-field__control {
        font-size: 16px;
      }
    }
  }
  >.searchContent {
    overflow: auto;
    height: calc(100% - 120px + 18px);
    margin-top: -18px;
    border-radius: 24px 24px 0 0;
    background: #f5f5f5;
    padding: 12px;
    .merchantItem:not(:last-child) {
      margin-bottom: 12px;
    }
  }
}
</style>
